<!doctype html>
<html>
<head>
{% load static %}
<meta charset="utf-8">
<title>login</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}

#wrap {
	height: 719px;
	width: 100;
	{% load static %}
	background-image: url({% static "login2.jpg" %});
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	background-size: 100% 100%; 
	
}
#head {
	height: 120px;
	width: 100;
	background: linear-gradient(to right,white ,gold,blue); 
	text-align: center;
	position: relative;
}
#foot {
	width: 100;
	height: 126px;
	background-color: #CC9933;
	position: relative;
}
#wrap .logGet {
	height: 408px;
	width: 368px;  
	position: absolute;
	top: 20%;
	right: 15%;
	background-color:rgba(255, 255, 255, 0.3);
}
.logC button {
	width: 30%;
	height: 45px;
	background-color: #ee7700;
	border: none;
	color: white;
	font-size: 18px;
	margin-left:45px;
}
.logGet .logD.logDtip .p1 {
	display: inline-block;
	font-size: 28px;
	margin-top: 30px;
	width: 86%;
}
#wrap .logGet .logD.logDtip {
	width: 86%;
	border-bottom: 1px solid #ee7700;
	margin-bottom: 60px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}
.logGet .lgD img {
	position: absolute;
	top: 12px;
	left: 8px;
}
.logGet .lgD input {
	width: 100%;
	height: 42px;
	text-indent: 2.5rem;
}
#wrap .logGet .lgD {
	width: 86%;
	position: relative;
	margin-bottom: 30px;
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
}
#wrap .logGet .logC {
	width: 86%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
 
 
.title{
	font-family: "宋体";
	color:black;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); 
	font-size: 36px;
	height: 40px;
	width: 30%;
	font-weight: bold;
}
	
	.title1{
		
		text-shadow: 5px 5px 5px #FF0000;
	}

 
.copyright {
	font-family: "宋体";
	color: #FFFFFF;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
	height: 60px;
	width: 40%;
	text-align:center;
}
	
 
#foot .copyright .img {
	width: 100%;
	height: 24px;
	position: relative;
}
.copyright .img .icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: 22px;
	vertical-align: middle;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 5px;
}
	
.copyright .img .icon1 {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: 22px;
	vertical-align: middle;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 5px;
}
.copyright .img .icon2 {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-left: 22px;
	vertical-align: middle;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 5px;
}
#foot .copyright p {
	height: 24px;
	width: 100%;
}
	
	
	.JMU{
		position: absolute;
		top: -40px;
		left: -530px;
	}
</style>

<link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
 
<body>


<div class="header" id="head">
  <div class="title"><p class="title1">学生信息管理系统</p>
  <a href="www.qq.com"><span style="font-size: 20px; position:absolute; right:-500px; top:-35px; text-decoration: underline; color:yellow;" >关于我们</span></a>
  <a href="www.baidu.com"><span style="font-size: 20px; position:absolute; right:-400px; top:-35px; text-decoration:underline; color:yellow;">帮助中心</span></a>
  {% load static %}
  <img src="{% static "JMU1.jpg" %}" width="120" class="JMU">
  </div>
	
</div>
	
	
<form method="POST" action="{% url 'user' %}" onsubmit="return eg.regCheck();">
		{% csrf_token %}
<div class="wrap" id="wrap">


	<div>
	<span style="font-weight:bold; font-size: 20px;text-shadow: 5px 5px 5px #FFFF00;position: absolute;top: 110px; left: 420px;">集 大 风 光</span>	
		
	</div>
	
	
	<div id="myCarousel" class="carousel slide" style="width: 1000px">
	<!-- 轮播（Carousel）指标 -->
	<ol class="carousel-indicators" style="position: absolute; top: 460px; left: 475px;">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>   
	<!-- 轮播（Carousel）项目 -->
	<div class="carousel-inner" style="width:450px; position: absolute; right:300px; top: 150px;">
		<div class="item active">
			<img src="{% static "JMU2.jpg" %}" alt="First slide">
		</div>
		<div class="item">
			<img src="{% static "JMU3.jpg" %}" alt="Second slide">
		</div>
		<div class="item">
			<img src="{% static "JMU4.jpg" %}" alt="Third slide">
		</div>
	</div>
	<!-- 轮播（Carousel）导航 -->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" style="position: absolute;top:300px;left: 200px;"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="position: absolute; top: 300px; right: 250px;"></span>
		<span class="sr-only">Next</span>
	</a>
</div> 

	<div class="logGet">
			<div class="logD logDtip" >
				<p class="p1" align="center"><span>登录系统</span></p>
			</div>
			<!-- 输入框 -->
			<div class="lgD">
				<img src="{% static "ID.PNG" %}" width="20" height="20" alt=""/>
				<input type="text" placeholder="ID" id="userid" name="userid" autofocus/>
			</div>
			<div class="lgD">
				<img src="{% static "pw.PNG" %}" width="20" height="20" alt=""/>
				<input type="password" placeholder="Password" id="userpwd" name="password"/>
			</div>
			<div class="logC">
				<button type="submit">登 录</button>
				<button onclick="window.location.href='{% url 'enroll' %}' " type="button">注 册</button>
			</div>
		</div>
</div>
</form>

<script>
		var eg = {};
		eg.$ = function(id){
			return document.getElementById(id);
		};
	
		eg.regCheck = function(){
			var uid = eg.$("userid");
			var upwd = eg.$("userpwd");
	
			if(uid.value ==''){
				alert('账号不能为空！');
				return false;
			}
	
			if(upwd.value ==''){
				alert('密码不能为空！请输入密码！！！');
				return false;
			}
		return true;
		};
	
		
		</script>


<div class="footer" id="foot">
  <div class="copyright">
    <div class="img">
		<i class="icon"></i><span>联系邮箱：1129235765@qq.com</span>
	</div>
	
	<div class="img">
		<i class="icon1"></i><span>联系地址：集美大学计算机工程学院网络1611</span>
	</div>
	  
	<div class="img">
	  <i class="icon2"></i><span>联系电话：17859768982</span>
	</div>
 
 
  </div>
	
</div>
	
	
</body>
</html>